<template>
	<view class="container">
		<view class="search">
			<u-search placeholder="搜索课程" v-model="keyword" @search="handleSearch" @custom="handleSearch"></u-search>
		</view>
		<u-empty mode="search" icon="/static/images/数据为空.png" v-if="searchResults==[]">
		</u-empty>

		<view style="padding-top: 50rpx;" v-for="(item,index) in searchResults" :key="index">
			<uni-card class="card" :isFull="true" @click="openCourse">
				<view>
					<u-image radius="10" :showLoading="true" :src="item.cover" width="160px" height="100px"></u-image>
				</view>
				<view slot="actions" class="card-actions">
					<u-text :text="item.title" bold="true">
					</u-text>
					<view class="card-price">
						<u-text :text="item.price" type="error" mode="price">
						</u-text>

						<u-text :text="item.num + '人正在学'" size="12" type="info"></u-text>
					</view>
				</view>
			</uni-card>
		</view>
		<u-divider text="我也是有底线的"></u-divider>



	</view>
</template>

<script>
	export default {
		data() {
			return {
				keyword: '',
				showHistory: true,
				searchHistory: ['研学', '物理实验', '英语口语'],
				searchResults: [{
					cover: "/static/images/数据为空.png",
					title: '物理基础课程',
					price: '399.00',
					num: 323,
				}, {
					cover: "/static/images/数据为空.png",
					title: '物理基础课程',
					price: '399.00',
					num: 323,
				}, {
					cover: "/static/images/数据为空.png",
					title: '物理基础课程',
					price: '399.00',
					num: 323,
				}, {
					cover: "/static/images/数据为空.png",
					title: '物理基础课程',
					price: '399.00',
					num: 323,
				}, {
					cover: "/static/images/数据为空.png",
					title: '物理基础课程',
					price: '399.00',
					num: 323,
				}, {
					cover: "/static/images/数据为空.png",
					title: '物理基础课程',
					price: '399.00',
					num: 323,
				}, ]
			}
		},
		methods: {
			handleSearch() {
				if (this.keyword.trim() === '') return;

				// 添加到搜索历史
				if (!this.searchHistory.includes(this.keyword)) {
					this.searchHistory.unshift(this.keyword);
					// 限制历史记录数量
					if (this.searchHistory.length > 5) {
						this.searchHistory.pop();
					}
				}

				// 显示搜索结果
				this.showHistory = false;

				// 这里实际应该调用搜索API
				// this.fetchSearchResults();
			},

			cancelSearch() {
				this.showHistory = true;
				this.keyword = '';
			},
			openCourse() {
				uni.navigateTo({
					url: '/pages/index/hotCourse/detail'
				})
			}

		}
	}
</script>

<style lang="scss">
	.container {
		overflow: hidden;
		background: #fff;
		font-size: 14px;
		padding: 15px;
		height: 100vh;
	}

	.card {
		display: flex;
		align-items: center;
		border-radius: 30rpx;

		.card-content {
			padding: 0;
		}
	}

	.card-actions {
		display: flex;
		flex-direction: column;
		width: 100%;

		.card-price {
			display: inherit;
			justify-content: space-between;
			width: 20vh;
			padding-top: 40rpx;

		}
	}
</style>